<template>
  <div :class="['subPage']">
    <div>
        <nav-bar 
        :title="navTitle" 
        position="center" 
        color='linear-gradient(90deg,rgba(85,125,245,1) 0%,rgba(63,74,222,1) 100%)' 
        :rowColor="'white'" 
        :goBack="goBack" 
        :isMsg='false' 
        fontColor='#fff' ></nav-bar>
    </div>
    <div class="mainContent" >
      <div class="subTop" >
        <ul class="topTab">
          <li v-for="item in tabList" :key="item.key" :class="{'nowTab':tab===item.key}" @click="handleChange(item.key)" >
            {{item.title}}
          </li>
          <span :class="['slideSpan',{'chooseTabSpan':tab==='tab2'}]" ></span>
        </ul>
      </div>
      <div class="pageTop" v-if="tab==='tab1'">
        <div class="item borderBtm" v-for="(item,index) in navList" :key="index" @click="toDetailsHelp(index,item)">
          <span class="cellTitle">{{item}}</span>
          <div class="headFr fr">
            <img :src="rightImg" class="linkPhoto"/>
          </div>
        </div>
      </div>
      <scroll-view 
      :scroll-y="true" 
      @scrolltolower="queryMore"  
      v-if="tab==='tab2' && recodeList.length>0"
      style="flex:1;overflow-y: scroll;"
      :refresher-triggered="triggered" 
      :refresher-enabled="enabled" 
      @refresherrefresh="queryList"
      :scroll-with-animation='true'
      >
        <div class="initDiv">
          <div v-for="(item, index) in recodeList" :key='item.id' class="item" @click="goDetails(item)">
            <text class="title">{{item.content}}</text>
            <div class="stateDiv">
              <span class="time" >反馈时间：{{item.feedTime}}</span>
              <span :class="['feedbackStatus',{'feedBacked':item.status_code==1}]" >{{item.status_code==1?'已回复':'未回复'}}</span>
            </div>
          </div>
        </div>
      </scroll-view>
      <div v-if="tab==='tab2' && recodeList.length == 0" class="noDataImg">
        <img :src="noDataImg"/>
      </div>
      <div class="feedBackBtn" v-if="tab==='tab2'" >
          <span class="recode" @click="toFeedback">我要反馈</span>
          <img :src="btnBgImg" alt="">
      </div>
      <div :class="{'ipxBottom':ifIphonex}" ></div>
    </div>
    <i-toast id="toast" /> 
  </div>
</template>
<script>
  let app = getApp()
  import api from '@/api/api'
  import navBar from '@/components/navBar'
  const {
    $Toast,
    $Message
  } = require('../../../../../static/iview/base/index')
  import * as types from '@/store/types'
  import { mapState } from 'vuex'
  import nim from '@/utils/nim'
  export default {
    computed: {
      ...mapState([
        'ifIphonex', 'talkInfo'
      ])
    },
    components: {
      navBar
    },
    data() {
      return {
        recodeList: [],
        page: 1,
        total: 0,
        imgUrl: '',
        noDataImg: '',
        btnBgImg: '',
        rightImg: '',
        showFlag:false,
        tab:'tab1',
        triggered:false,
        enabled: true,
        tabList: [
          {title: '常见问题', key: 'tab1', count: 0},
          {title: '意见反馈', key: 'tab2', count: 0}
        ],
        navList: ['使用指南', '预约挂号问题', '就诊相关问题', '账号相关问题', '其他问题', '注册协议'],
        navTitle: '帮助与反馈'
      }
    },
    onShow () {
      this.recodeList = []
      this.imgUrl = api.imgUrl
      this.noDataImg = this.imgUrl + 'noData.png'
      this.rightImg = this.imgUrl + 'right.png'
      this.btnBgImg = this.imgUrl + "btnBg.png";
      this.navTitle = '帮助与反馈'
      this.queryList()
    },
    onLoad (options) {
      Object.assign(this.$data, this.$options.data())
      this.page = 1
      this.total = 0
    },
    onUnload() {
      // this.seeFeedDetail = false
      // this.wantFeedback = false
      this.tab = 'tab1'
    },
    methods: {
      // 查询反馈列表
      queryList() {
        let that = this
        that.triggered = true
        this.recodeList = []
        if (that.tab === 'tab2') {
          that.$api.getUserFeedbackList({page: that.page, rows: 1000},{'showLoading': true}).then(res=>{
            let list = res.data
            list.forEach((ele,i)=>{
              list[i].feedTime = that.$utils.filterTime(ele.insert_time, 1)
              list[i].content = list[i].content.split(/\\n/).join('\n')
            })
            that.recodeList = list
            that.showFlag = true
            that.triggered = false
          })
        }
      },
      // 滑倒底部获取更多
      queryMore () {
        
      },
      // 改变tab
      handleChange (value) {
        this.tab = value
        this.recodeList = []
        this.queryList()
      },
      // 获取反馈详情
      goDetails(item) {
        this.$router.push(`/pages/center/child/commonIssue/main?title=反馈详情&type=2&item=${JSON.stringify(item)}`)
      },
      // 常见问题跳转
      toDetailsHelp (index,item) {
        this.$router.push(`/pages/center/child/commonIssue/main?title=${item}&index=${index}`)
      },
      // 我要反馈
      toFeedback () {
        this.$router.push(`/pages/center/child/commonIssue/main?title=我要反馈&type=1`)
      },
      // 路由反馈函数
      goBack () {
        this.$router.go(-1)
      },
    }
  }
</script>
<style scoped lang='less'>
  .subPage {
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
  }
  .mainContent {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    position: relative;
  }
  .subTop {
    height: 90rpx;
    width: 100%;
    background-color: #FFFFFF;
    border-bottom: 1rpx solid #DDDDDD;
    box-sizing: border-box;
    ul {
      position: relative;
      height: 100%;
      list-style: none;
      width: 100%;
      font-size: 30rpx;
      color: #666666;
      display: flex;
      li {
        flex: 1;
        text-align: center;
        line-height: 90rpx;
      }
      .nowTab {
        color: #4B7AEA;
        font-weight: 600px;
      }
    }
    .slideSpan {
      position: absolute;
      height: 5rpx;
      width: 135rpx;
      background-color: #4B7AEA;
      bottom: 0;
      left: 16.5%;
      transition: left ease 0.3s;
    }
    .chooseTabSpan {
      left: 66.5%;
    }
  }
  .initDiv {
    // margin-top: 70rpx;
    background-color: #F9F9F9;
    .item {
      background: rgba(255, 255, 255, 1);
      // margin-top: 20rpx;
      border-bottom: solid 10rpx #F9F9F9;
      padding: 12rpx 30rpx 30rpx 30rpx;
      min-height: 180rpx;
      box-sizing: border-box;
      .title {
        display: block;
        height: 80rpx;
        line-height: 80rpx;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: #333333;
        font-size: 34rpx;
      }
      .stateDiv {
        // margin-top: 10rpx;
        height: 50rpx;
        font-size: 30rpx;
        span {
          display: inline-block;
          height: 50rpx;
          line-height: 50rpx;
        }
        .time {
          color: #999999;
          width: 80%;
        }
        .feedbackStatus {
          text-align: right;
          width: 20%;
          color: #999999;
        }
        .feedBacked {
          color: #4B7AEA;
        }
      }
    }
  }
  .feedBackBtn {
    position: relative;
    height: 140rpx;
    overflow: hidden;
    .recode {
      position: absolute;
      width: 100%;
      text-align: center;
      line-height: 50rpx;
      margin-top: 35rpx;
      color: #fff;
      font-size: 36rpx;
    }
    img {
      height: 100%;
      width: 100%;
    }
    .btn {
      height: 100%;
      margin: 0 30rpx;
      width: 100%;
    }
    .twoBtn {
      height: 100%;
      margin: 0 30rpx;
      display: flex;
      div {
        flex: 1;
        text-align: center;
        position: relative;
        font-size: 36rpx;
      }
      div:nth-child(1) {
        background: #4a67eb;
        color: #fff;
        height: 100rpx;
        line-height: 100rpx;
        margin: 20rpx 30rpx 0 0;
        border-radius: 2px;
      }
      div:nth-child(2) {
        color: #fff;
        height: 100rpx;
        line-height: 100rpx;
        border-radius: 2px;
        border: 1rpx solid rgba(204, 204, 204, 1);
        margin-top: 20rpx;
        color: #666666;
      }
    }
  }
  .noDataImg {
    flex: 1;
  }
  .ipxBottom {
    height: 30rpx;
  }
  .pageTop {
    flex: 1;
    overflow-y: auto;
    .cellTitle {
      font-size:34rpx;
      color: #333;
      margin-left: 30rpx;
    }
    .headimg {
      height: 120rpx;
      line-height: 120rpx;
      background: #fff;
    }
    .item {
      height: 100rpx;
      line-height: 100rpx;
      background: #fff;
      overflow: hidden;
      box-sizing: border-box;
    }
    .headFr {
      height: 100rpx;
      line-height: 100rpx;
      display: flex;
      align-items:center;
      overflow: hidden;
    }
    .yibao {
      height: 100rpx;
      line-height: 100rpx;
      img {
        display: inline-block!important;
        margin-top: 35rpx;
      }
    }
    .personPhoto {
      width:80rpx;
      height:80rpx;
      border-radius:4rpx;
    }
    .nopersonPhoto {
      width:80rpx;
      height:80rpx;
      border-radius:4rpx;
      background: #E9E9E9;
      display: inline-block;
      margin-top: 10rpx;
    }
    .marginBtm {
      margin-bottom: 16rpx;
    }
    .borderBtm {
      border-bottom: 1rpx solid #E9E9E9;
    }
    .itemType {
      padding: 25rpx 30rpx 25rpx 0;
      background: #fff;
      height: 115rpx;
      .type {
        margin-bottom: 20rpx;
        margin-right: 20rpx;
      }
      img {
        width: 43rpx;
        height: 43rpx;
        margin-right: 18rpx;
      }
    }
  }
  .linkPhoto {
    width: 17rpx;
    height: 30rpx;
    margin-left: 20rpx;
    margin-right: 30rpx;
  }
  .nonePadding {
    padding: 20rpx 0 0 0;
  }
</style>
